<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名：</label>
			<div class="layui-input-inline" style="width: 130px">
				<input type="text" name="Pname" id="Pname" class="layui-input"
					lay-verify="required" placeholder="请输入商品名">
			</div>
			<label class="layui-form-label">类型：</label>
			<div class="layui-input-inline" style="width: 130px">
				<select name="Cname" id="Cname" class="layui-input"
					lay-verify="required">
					<option value="">请选择</option>
					<c:forEach items="${productclass }" var="p">
					<option value="${p.cname }">${p.cname }</option>
					</c:forEach>
				</select>
			</div>
			<label class="layui-form-label">是否上架：</label>
			<div class="layui-input-inline" style="width: 130px">
			<select name="Pputaway" id="Pputaway" class="layui-input"
					lay-verify="required">
					<option value="">请选择</option>
					<option value="是">是</option>
					<option value="否">否</option>
				</select>
			</div>
			<label class="layui-form-label">推荐位置：</label>
			<div class="layui-input-inline" style="width: 130px">
			<select name="Raddress" id="Raddress" class="layui-input"
					lay-verify="required">
					<option value="">请选择</option>
					<option value="新品">新品</option>
					<option value="畅销">畅销</option>
					<option value="特色产品">特色产品</option>
				</select>
			</div>
			<button class="layui-btn" id="serach" data-type="reload">搜索</button>
		</div>
	</div>

	<table class="layui-hide" id="demo" lay-filter="demo"></table>
	<!-- 按钮 -->
	<script type="text/html" id="PputawayDemo">
		<input type="checkbox" name="Pputaway" lay-skin="switch" value="{{d.Pid}}" lay-text="是|否" lay-filter="shenheDemo" {{ d.Pputaway == '是'  ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="tu">商品图</a>
  		<a class="layui-btn layui-btn-xs" lay-event="guige">商品规格</a>
		<a class="layui-btn layui-btn-xs" lay-event="tuijian">加入推荐</a>
		<a class="layui-btn layui-btn-xs" lay-event="activity">加入活动</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
  			<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		</div>
	</script>
	<script type="text/html" id="img">
		<img src="{{d.Purl}}">
	</script>
	<script>
		layui.use(['table','form'], function() {
			var table = layui.table;
			var form = layui.form;
			var $ = layui.jquery;//引入jquery
			//执行渲染
			table.render({
				elem : '#demo' //指定原始表格元素选择器（推荐id选择器）
				,
				toolbar : '#toolbarDemo'//开启头部栏工具
				,
				url : '/shoppingsix/product'//请求地址
				,
				method : 'POST',
				cols : [ [ {
					field : 'Pid',
					title : '编号',
					align : 'center',
					width : 65
				}/* , {
					field : 'Pstore',
					title : '店铺',
					align : 'center',
					width : 100,

			} */, {
					field : 'Pname',
					title : '名称',
					align : 'center',
					width : 80
				}, {
					field : 'Pprice',
					title : '价格',
					align : 'center',
					width : 70
				}, {
					field : 'Purl',
					title : '图片',
					templet : '#img',
					align : 'center',
					width : 150,
				}, {
					field : 'Purl',
					title : '图片地址',
					align : 'center',
					width : 230
				}, {
					field : 'Pdescribe',
					title : '描述',
					align : 'center',
					width : 80
				}/* , {
					field : 'Pimage_classification',
					title : '图片分类',
					align : 'center',
					width : 100
				} */, {
					field : 'Pputaway',
					title : '是否上架',
					toolbar : '#PputawayDemo',
					align : 'center',
					width : 90,
				}, {
					field : 'Cname',
					title : '分类名称',
					align : 'center',
					width : 100
				}/* , {
					field : 'Sid',
					title : '商品规格',
					align : 'center',
					width : 100
				} */, {
					field : 'Pbrand',
					title : '品牌',
					align : 'center',
					width : 80
				}, {
					field : 'Phome',
					title : '产地',
					align : 'center',
					width : 90
				}/* , {
					field : 'Pmodel',
					title : '型号',
					align : 'center',
					width : 80
				} */, {
					field : 'Pstyle',
					title : '风格',
					align : 'center',
					width : 80
				}, {
					field : 'Raddress',
					title : '推荐位置',
					align : 'center',
					width : 90
				}/* , {
					field : 'Ptexture',
					title : '材质',
					align : 'center',
					width : 80
				}, {
					field : 'Pway',
					title : '连接方式',
					align : 'center',
					width : 100
				} *//* , {
				field : 'standby_application_one',
				title : '备用1',
				align : 'center',
				width : 80
			}, {
				field : 'standby_application_two',
				title : '备用2',
				align : 'center',
				width : 80
			} */, {
					field : 'right',
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					width : 400
				} ] ],
				page : true,
				id : 'testReload'
			//设置表头
			//,…… //更多参数参考右侧目录：基本参数选项
			}
			);
			form.on('switch(shenheDemo)', function(obj){
				var id=this.value;
				var name=this.name;
				var result=obj.elem.checked;
				var Pputaway="";
				if (result) {
					Pputaway="是";
				}else{
					Pputaway="否";
				}
				 $.post( 'http://localhost:8080/shoppingsix/product_update',{"Pid":id,'Pputaway':Pputaway,},
							function(data) {
								if(data.count>0){
									layer.msg('修改成功', {
										  icon: 1,
										  time: 2000 //2秒关闭（如果不配置，默认是3秒）
										}, function(){
										  //do something
										}); 
								}
							}, "json");  
					});
		
			//监听头部工具栏
			table.on('toolbar(demo)', function(obj) {
				switch (obj.event) {
				case 'add':
					layer.open({//打开一个页面
						type : 2,//在当前页面打开一个页面
						area : [ '550px', '600px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/product-add',//页面地址
						title : '新增商品',//打开页面标题
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
					break;
				}
				;
			});
			//监听工具条
			table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				if (obj.event === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						var url = '/shoppingsix/product_del';//请求地址
						$.post(url, {
							Pid : obj.data.Pid,
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();//刷新页面
							}
						}, "json");
					});
				}else if (obj.event === 'tu') { //查看
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '1000px', '650px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/houtai/picture.jsp',//页面所在位置
						title : '您正在查看编号为' + obj.data.Pid + '的商品图信息',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Pid").val(obj.data.Pid);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				} else if (obj.event === 'tuijian') { //推荐
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '550px', '600px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/houtai/product_recommend_add.jsp',//页面所在位置
						title : '您要添加推荐商品的编号为' + obj.data.Pid,
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Pid").val(obj.data.Pid);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				} else if (obj.event === 'edit') { //推荐
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '550px', '600px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/product-update',//页面所在位置
						title : '您正在编辑的商品编号为' + obj.data.Pid,
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Pid").val(obj.data.Pid);
							body.contents().find("#Pname").val(obj.data.Pname);
							body.contents().find("#Pprice").val(obj.data.Pprice);
							body.contents().find("#Purl").val(obj.data.Purl);
							body.contents().find("#Pdescribe").val(obj.data.Pdescribe);
							body.contents().find("#Pdescribe").val(obj.data.Pdescribe);
							body.contents().find("#Cid").val(obj.data.Cid);
							body.contents().find("#Sid").val(obj.data.Sid);
							body.contents().find("#Pbrand").val(obj.data.Pbrand);
							body.contents().find("#Phome").val(obj.data.Phome);
							body.contents().find("#Pmodel").val(obj.data.Pmodel);
							body.contents().find("#Pstyle").val(obj.data.Pstyle);
							body.contents().find("#Ptexture").val(obj.data.Ptexture);
							body.contents().find("#Pway").val(obj.data.Pway);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				}else if (obj.event === 'guige') { //查看
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '1000px', '650px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/houtai/product_specification.jsp',//页面所在位置
						title : '您正在查看商品编号为' + obj.data.Pid + '信息',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Standby_application_one").val(obj.data.Standby_application_one);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				} else if (obj.event === 'activity') { //查看
					layer.open({//打开一个页面
						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						area : [ '600px', '650px' ],//页面宽高
						content : 'http://localhost:8080/shoppingsix/add',//页面所在位置
						title : '加入活动',
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#Pid").val(obj.data.Pid);
						},
						end : function() {
							window.location.reload();//当窗口关闭后刷新页面
						}
					});
				} 
					
					
			});
			$('#serach').on('click', function() {
				var Pname = $("#Pname").val();//上面搜索框的id
				var Cname = $("#Cname").val();//上面搜索框的id
				var Raddress = $("#Raddress").val();//上面搜索框的id
				var Pputaway = $("#Pputaway").val();//上面搜索框的id
				table.reload('testReload', {//testReload,上面渲染逼格的id
					where : {//接口需要请求的参数
						'Pname' : Pname,
						'Cname' : Cname,
						'Raddress' : Raddress,
						'Pputaway' : Pputaway,
					}
				});
			});

		});
	</script>
</body>
</html>